<template>
  <div class="goods">
    <div class="nav">
      <div class="w">
        <a @click="reset()" :class="{ active: isIndex === 0 }" href="javascript:;">综合排序</a>
        <a @click="handleOrder(1)" :class="{ active: isIndex === 1 }" href="javascript:;" >价格从低到高</a>
        <a @click="handleOrder(2)" :class="{ active: isIndex === 2 }" href="javascript:;" >价格从高到低</a>
        <div class="price-interval">
          <input type="number" class="input" placeholder="0" v-model.number="queryInfo.min">
          <span style="margin: 0 5px"> - </span>
          <input type="number" placeholder="N" v-model.number="queryInfo.max">
          <el-button type="primary" size="small" style="margin-left:10px" @click="search()">确定</el-button>
        </div>
      </div>
    </div>

    <div>
      <div class="img-item" v-if="allGoods.length">
        <div  class="goods-box w">
          <MallGoods v-for="goods in allGoods" :key="goods.id" :goods='goods'></MallGoods>
        </div>
        <el-pagination
          v-if="allGoods.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div class="no-info" v-else>
        <div class="no-data">
          <img src="../../../public/images/no-data.png" alt="">
            <br>该商品暂无评论数据
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import MallGoods from '../../components/MallGoods.vue'
import { getAllGoodsInfo } from '../../api/goods'
export default {
  name: 'allGoods',
  data() {
    return {
      // 商品的查询参数
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 20,
        min: null,
        max: null,
        goodstype: 0,
        order: 0
      },
      isIndex: null,
      // 所有商品数据
      allGoods: [],
      // 商品总数
      total: 0,
    }
  },
  created() {
    if(this.$route.query.type){
      this.queryInfo.goodstype = this.$route.query.type
      this.getAllGoods()
    }else {
      this.getAllGoods()
    }
    
  },
  methods: {
    async getAllGoods() {
      const { data: res } = await getAllGoodsInfo(this.queryInfo)
      // console.log(res)
      if (res.code !== 0) {
        return this.$message.error('获取商品失败！')
      }
      this.allGoods = res.result.list
      this.total = res.result.total
      console.log(res.result)
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size
      this.getAllGoods()
    },
    handleCurrentChange(Num) {
      this.queryInfo.pageNum = Num
      this.getAllGoods()
    },
    handleOrder(v) {
      this.isIndex = v
      this.queryInfo.order = v
      this.getAllGoods()
    },
    reset() {
      this.isIndex = 0
      this.queryInfo.order= 0
      this.queryInfo.min = null
      this.queryInfo.max = null
      this.getAllGoods()
    },
    search() {
      if(typeof this.queryInfo.min !== 'number' || typeof this.queryInfo.max !== 'number'){
        return this.$message.error('请输入商品价格')
      }
      this.getAllGoods()
    }
  },
  components: {
    MallGoods
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/mixin";
@import "../../assets/style/theme";

.nav {
  height: 60px;
  line-height: 60px;
  > div {
    display: flex;
    align-items: center;
    a {
      padding: 0 15px;
      height: 100%;
      @extend %block-center;
      font-size: 12px;
      color: #999;
      &.active {
        color: #5683EA;
      }
      &:hover {
        color: #5683EA;
      }
    }
    input {
      @include wh(80px, 30px);
      border: 1px solid #ccc;
    }
    input + input {
      margin-left: 10px;
    }
  }
  .price-interval {
    padding: 0 15px;
    @extend %block-center;
    input[type="number"] {
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      border-radius: 5px;
    }
  }
}

.goods-box {
  > div {
    float: left;
    border: 1px solid #efefef;
  }
}

.no-info {
  padding: 100px 0;
  text-align: center;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  .no-data{
    align-self: center;
  }
}

.img-item{
  display: flex;
  flex-direction: column;
}

.el-pagination{
  align-self: flex-end;
  margin: 3vw 10vw 2vw;
}

.section {
  padding-top: 8vw;
  margin-bottom: -5vw;
  width: 1218px;
  align-self: center;
}

.recommend {
  display: flex;
  > div {
    flex: 1;
    width: 25%;
  }
}

.img-item{
  display: flex;
  flex-direction: column;
}

.no-info {
  padding: 100px 0;
  text-align: center;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  .no-data{
    align-self: center;
  }
}
</style>